<template>
  <el-row :gutter="30" class="factory-kpi">
    <el-col :span="6">
      <el-card>
        <el-row>
          <el-col :span="10">
            <div class="kpi-chart" id="total-chart"></div>
          </el-col>
          <el-col :span="7">
            <div class="count">{{ kpi.thisMonthTotal }}</div>
            <p>客群总数</p>
          </el-col>
          <el-col :span="7">
            <div class="sign">
              <span class="arrow" :class="[kpi.thisMonthTotal - kpi.lastMonthTotal >= 0 ? 'up' : 'down']">
                <i :class="[kpi.thisMonthTotal - kpi.lastMonthTotal >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
              </span>
              <span class="rate" :class="[kpi.thisMonthTotal - kpi.lastMonthTotal >= 0 ? 'up' : 'down']">
                {{ kpi.totalRate }}%
              </span>
            </div>
            <p>月</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <el-row>
          <el-col :span="10">
            <div class="kpi-chart" id="user-chart"></div>
          </el-col>
          <el-col :span="7">
            <div class="count">{{ kpi.thisMonthUserTotal }}</div>
            <p>我的客群</p>
          </el-col>
          <el-col :span="7">
            <div class="sign">
              <span class="arrow" :class="[kpi.thisMonthUserTotal - kpi.lastMonthUserTotal >= 0 ? 'up' : 'down']">
                <i
                  :class="[kpi.thisMonthUserTotal - kpi.lastMonthUserTotal >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
                ></i>
              </span>
              <span class="rate" :class="[kpi.thisMonthUserTotal - kpi.lastMonthUserTotal >= 0 ? 'up' : 'down']">
                {{ kpi.userTotalRate }}%
              </span>
            </div>
            <p>月</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <el-row>
          <el-col :span="10">
            <div class="kpi-chart" id="year-chart"></div>
          </el-col>
          <el-col :span="7">
            <div class="count">{{ kpi.thisYearAdd }}</div>
            <p>本年新增</p>
          </el-col>
          <el-col :span="7">
            <div class="sign">
              <span class="arrow" :class="[kpi.thisYearAdd - kpi.lastYearAdd >= 0 ? 'up' : 'down']">
                <i :class="[kpi.thisYearAdd - kpi.lastYearAdd >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
              </span>
              <span class="rate" :class="[kpi.thisYearAdd - kpi.lastYearAdd >= 0 ? 'up' : 'down']">
                {{ kpi.yearAddRate }}%
              </span>
            </div>
            <p>年</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <el-row>
          <el-col :span="10">
            <div class="kpi-chart" id="add-chart"></div>
          </el-col>
          <el-col :span="7">
            <div class="count">{{ kpi.thisMonthAdd }}</div>
            <p>本月新增</p>
          </el-col>
          <el-col :span="7">
            <div class="sign">
              <span class="arrow" :class="[kpi.thisMonthAdd - kpi.lastMonthAdd >= 0 ? 'up' : 'down']">
                <i :class="[kpi.thisMonthAdd - kpi.lastMonthAdd >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
              </span>
              <span class="rate" :class="[kpi.thisMonthAdd - kpi.lastMonthAdd >= 0 ? 'up' : 'down']">
                {{ kpi.monthAddRate }}%
              </span>
            </div>
            <p>月</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      kpi: {
        thisYearAdd: 0,
        lastYearAdd: 0,
        yearAddRate: 0,
        thisMonthAdd: 0,
        lastMonthAdd: 0,
        monthAddRate: 0,
        thisMonthTotal: 0,
        lastMonthTotal: 0,
        totalRate: 0,
        thisMonthUserTotal: 0,
        lastMonthUserTotal: 0,
        userTotalRate: 0
      }
    }
  },
  created() {
    this.getKpi()
  },
  methods: {
    initKpi(chartName, data, params) {
      let myChart = echarts.init(document.getElementById(chartName))
      let xData = []
      let yData = []
      data.forEach(v => {
        xData.push(v.kpiSn)
        yData.push(v.kpiValue)
      })
      let option = {
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            data: yData,
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: params.lineColor[0]
                  },
                  {
                    offset: 1,
                    color: params.lineColor[1]
                  }
                ])
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: params.areaColor[0]
                },
                {
                  offset: 1,
                  color: params.areaColor[1]
                }
              ])
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getKpi() {
      this.$ajax({
        url: this.$ajax.setUrl('tagFactory/getKPI'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.kpi = data.data
          this.initKpi('year-chart', data.data.yearAddList, {
            lineColor: ['#5ba2ed', '#6a58f7'],
            areaColor: ['#deedfb', '#dee4fb']
          })
          this.initKpi('add-chart', data.data.monthAddList, {
            lineColor: ['#82f1c6', '#5cbaa5'],
            areaColor: ['#defbf0', '#daefeb']
          })
          this.initKpi('total-chart', data.data.monthTotalList, {
            lineColor: ['#eed264', '#f8a346'],
            areaColor: ['#fbf6de', '#feedda']
          })
          this.initKpi('user-chart', data.data.monthUserTotalList, {
            lineColor: ['#ff8e79', '#f9558f'],
            areaColor: ['#ffe8e3', '#fedae7']
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.factory-kpi {
  text-align: center;
  margin-bottom: 20px;
  .el-card {
    padding: 10px 0;
    .el-card__body {
      padding: 20px 10px;
    }
  }
  .el-row {
    padding: 10px 0;
  }
  .kpi-chart {
    width: 100%;
    height: 65px;
  }
  .count {
    font-size: 35px;
    font-weight: bold;
    height: 50px;
    color: $theme-color;
  }
  .sign {
    padding-top: 10px;
    height: 50px;
  }
  .arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    line-height: 20px;
    border-radius: 50%;
    &.up {
      background-color: #2fc866;
    }
    &.down {
      background-color: #ee6861;
    }
    i {
      font-weight: bold;
      color: #fff;
      margin-top: 5px;
    }
  }
  .rate {
    font-size: 20px;
    padding-top: 5px;
    &.up {
      color: #2fc866;
    }
    &.down {
      color: #ee6861;
    }
  }
  p {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
